import { registerMicroApps, start, addGlobalUncaughtErrorHandler } from 'qiankun';

// 注册微应用
registerMicroApps([
  {
    name: 'vue3App', // 微应用的名称
    entry: '//localhost:8080', // Vue 3应用的入口地址，这个是Vue 3应用的默认开发端口
    container: '#vue3-container', // 微应用的容器ID
    activeRule: '/vue3', // 激活微应用的路由规则
    props: {
      // 主应用向微应用传递的数据
      data: {
        authToken: localStorage.getItem('token'),
        userInfo: JSON.parse(localStorage.getItem('userInfo') || '{}'),
      },
      // 主应用暴露给微应用的方法
      methods: {
        onVueAppMount: () => console.log('Vue app mounted'),
        logout: () => {
          localStorage.removeItem('token');
          localStorage.removeItem('userInfo');
          window.location.href = '/login';
        }
      }
    }
  }
], {
  // 微应用挂载前
  beforeMount: (app) => {
    console.log('微应用挂载前', app.name);
    return Promise.resolve();
  },
  // 微应用挂载后
  afterMount: (app) => {
    console.log('微应用挂载后', app.name);
    return Promise.resolve();
  },
  // 微应用卸载前
  beforeUnmount: (app) => {
    console.log('微应用卸载前', app.name);
    return Promise.resolve();
  },
  // 微应用卸载后
  afterUnmount: (app) => {
    console.log('微应用卸载后', app.name);
    return Promise.resolve();
  }
});

// 添加全局错误处理
addGlobalUncaughtErrorHandler((event) => {
  console.error('微前端全局错误:', event);
  const { message, filename, lineno, colno, error } = event as ErrorEvent;
  
  // 可以在这里添加错误上报逻辑
  console.group('微前端错误详情');
  console.error('错误信息:', message);
  console.error('错误文件:', filename);
  console.error('错误行号:', lineno);
  console.error('错误列号:', colno);
  console.error('错误对象:', error);
  console.groupEnd();
});

// 启动乾坤
export const startQiankun = () => {
  start({
    sandbox: {
      // 启用严格的沙箱模式
      strictStyleIsolation: true,
      // 样式前缀
      experimentalStyleIsolation: true,
    },
    // 开启预加载
    prefetch: 'all',
    // 单实例模式
    singular: false,
    // fetch配置
    fetch: window.fetch,
  });
  
  console.log('乾坤微前端框架已启动');
};

// 导出微应用的一些帮助函数
export const qiankunHelpers = {
  // 加载Vue应用
  loadVueApp: (): Promise<boolean> => {
    return new Promise((resolve, reject) => {
      console.log('开始加载Vue应用...');
      
      // 检查Vue应用是否可访问
      fetch('//localhost:8080')
        .then(response => {
          if (response.ok) {
            console.log('Vue应用服务可访问');
            resolve(true);
          } else {
            console.warn('Vue应用服务响应异常:', response.status);
            reject(new Error(`Vue应用服务响应异常: ${response.status}`));
          }
        })
        .catch(error => {
          console.error('Vue应用服务不可访问:', error);
          reject(new Error('Vue应用服务不可访问，请确保子应用正在运行'));
        });
    });
  },
  
  // 卸载Vue应用
  unloadVueApp: (): boolean => {
    console.log('Vue应用已卸载');
    // 清理容器内容
    const container = document.getElementById('vue3-container');
    if (container) {
      // 不直接清空，让乾坤自己管理
      console.log('清理Vue应用容器');
    }
    return true;
  },
  
  // 检查微应用状态
  checkAppStatus: (_appName: string): string => {
    // 这里可以添加检查微应用状态的逻辑
    return 'unknown';
  },
  
  // 重新加载微应用
  reloadApp: (appName: string): Promise<void> => {
    return new Promise((resolve) => {
      console.log(`重新加载微应用: ${appName}`);
      // 这里可以添加重新加载的逻辑
      setTimeout(resolve, 1000);
    });
  }
};